<template>
	<view class="book">
		<view class="book-img-list">
			<view class="imgItem">
				<image src="../../static/qf.gif"></image>
			</view>
		</view>
		<!-- <view class="book-today">
			<view class="book-today-item">
				<view class="title"><text style="font-size: 28upx;">今日投入</text>LABred</view>
				<view class="sum color2">{{wallet.labblue}}</view>
			</view>
			<view class="book-today-item">
				<view class="title"><text style="font-size: 28upx;">今日产出</text>LABbule</view>
				<view class="sum color2">{{wallet.shifang}}</view>
			</view>
		</view> -->
		<view class="book-info">
			<view class="book-info-item">
				<view class="title">锁仓LAB</view>
				<view class="sum color2">{{wallet.labblue || '--'}}</view>
			</view>
			<view class="book-info-item">
				<view class="title">产出LAB</view>
				<view class="sum color2">{{wallet.shifang || '--'}}</view>
			</view>
			<view class="book-info-item">
				<view class="title">记账等级</view>
				<view class="sum color2 LABvip">
					{{LABvip || '--'}}
					<!-- <view class="iconfont iconluobu"></view>
					<view class="iconfont iconluobu"></view>
					<view class="iconfont iconluobu"></view> -->
				</view>
			</view>
		</view>
		<view class="book-btn bg1" hover-class="btn-hover" @click="onLABExchange('LAB')">投入LAB</view>
<!-- 		<view class="book-btn bg2" hover-class="btn-hover" @click="onLABExchange('red')">兑换SEED为LABred</view> -->
		<view class="book-btn bg2" hover-class="btn-hover" @click="onLABExchange('LABtk')">兑换LABtk</view>
		<view class="book-btn bg6" hover-class="btn-hover" @click="goEarnings">查看账本</view>
		<van-popup :show="popupShow"  position="bottom" @close="onPopupClose">
			<lab-popup 
			ref="popup"
			:popupType="popupType"
			@emitDialogShow="emitDialogShow"
			@emitPopupShow="onPopupClose"
			@emutGetWallet="getWallet"
			></lab-popup>
		</van-popup>
		<dialog-pwd
			:dialogType="dialogType"
			:dialogShow="dialogShow"
			@emitClose="emitClose">
		</dialog-pwd>
	</view>
</template>

<script>
import LabPopup from './popup/invest-labred.vue'
import DialogPwd from '../../components/dialog/pwd-dialog.vue';
import { mapActions, mapGetters } from 'vuex';
export default {
	components: {
		LabPopup,
		DialogPwd
	},
	data() {
		return {
			popupType: '',
			popupBuy: '',
			
			LABvip: '',
			dialogType: '',
			popupShow: false,
			dialogShow: false
		};
	},
	onShow() {
		uni.showLoading({title: ''})
		this.getUserlv()
		if(this.wallet.addr) return
		this.getWallet()
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo',
			wallet: 'getWalletInfo'
		})
	},
	methods: {
		...mapActions([
			'setWalletInfo',
			'setUserInfo'
		]),
		onLABExchange (type) {
			this.popupShow = true
			this.popupType = type
		},
		onPopupClose () {
			this.$refs.popup.resetLabValue()
			this.popupShow = false
		},
		emitClose(e) {
			// 密码输入回调
			this.dialogShow = false
			if (e === 'off') return;
			this.$refs.popup.getPopupBuy();
		},
		emitDialogShow (e) {
			this.dialogType = e
			this.dialogShow = true
		},
		getUserlv () {
			this.$http.getUserlv({
				uid: this.userInfo.id
			}).then(e => {
				if (e.data) {
					this.LABvip = e.data
					this.userInfo.vip = e.data
					this.setUserInfo(this.userInfo)
					uni.hideLoading()
				}
			})
		},
		getWallet (emit) {
			if (!this.userInfo.addr) return
			this.$http.getWallet({addr: this.userInfo.addr}).then(e => {
				if (e.data.date) {
					this.setWalletInfo(e.data.date)
					if (!emit) return
					uni.showToast({
						title: emit.title,
						icon: 'none'
					});
					if (!emit.popupShow) return
					setTimeout(e => {
						this.onPopupClose()
					}, 1000)
				}
			})
		},
		goEarnings (key) {
			uni.navigateTo({
				url: '/pages/bookkeeping/earnings/index?type=' + key
			});
		},
		onRecharge () {
			uni.navigateTo({
				url: '/pages/wallet/recharge/index'
			});
		}
	},
	onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url: '/pages/bookkeeping/rule'
		});
	}
};
</script>

<style scoped lang="scss">
image{
	width: 100%;
	height: 100%;
}
.book {
	padding: 50upx 40upx;
	&-img-list{ 
		display: flex;
		justify-content: space-around;
		margin-bottom: 60upx;
		margin-top: 30upx;
		padding: 20upx;
		.imgItem{
			width: 320upx;
			height: 320upx;
		}
	}
	&-today {
		position: absolute;
		top: 30upx;
		left: 30upx;
		width: 50%;
		&-item {
			padding: 20upx 0;
			.title {
				margin-bottom: 20upx;
				font-size: 22upx;
				line-height: 1;
				color: #757271;
			}
			.sum {
				line-height: 1;
				font-size: 38upx;
				.iconfont {
					font-size: 36upx;
				}
			}
		}
	}
	&-info {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 50upx;
		padding: 30upx 20upx 20upx 20upx;
		text-align: center;
		background-color: #fff;
		border-radius: 10upx;
		box-shadow: 0 5upx 15upx 0 rgba(0,0,0,0.10);
		&-item {
			width: 33.3%;
			padding: 20upx 0;
			.title {
				margin-bottom: 20upx;
				font-size: 22upx;
				line-height: 1;
				color: #757271;
			}
			.sum {
				line-height: 1;
				font-size: 40upx;
				.iconfont {
					font-size: 36upx;
				}
			}
			.LABvip {
				font-size: 36upx;
			}
		}
	}
	&-btn {
		width: 100%;
		height: 70upx;
		margin-bottom: 30upx;
		line-height: 70upx;
		text-align: center;
		color: #fff;
		border-radius: 10upx;
	}
	.LAB-mod {
		position: relative;
		width: 100%;
		text-align: center;
		background-color: #fff;
		.iconguanbi {
			position: absolute;
			top: 30upx;
			right: 40upx;
			z-index: 2;
			width: 60upx;
			height: 60upx;
			font-size: 44upx;
			color: #9b9b9b;
		}
		.LAB{
			&-title {
				padding: 30upx 0;
				font-size: 34upx;
				// color: #9b9b9b;
			}
			&-count {
				margin: 10upx 0;
				text-align: left;
				font-size: 26upx;
				&-item {
					padding: 0 10upx;
					.itemsSum {
						display: flex;
					}
					.itemRule {
						margin-top: 20upx;
						margin-bottom: 20upx;
						font-size: 20upx;
						line-height: 1.4;
						color: #7e7e7e;
					}
					.itemsCount {
						margin-bottom: 10upx;
						font-size: 22upx;
						.color1 {
							font-size: 28upx;
							font-size: 500;
						}
					}
					.recharge {
						margin-left: 20upx;
						color: #6eb92b;
						font-size: 600;
						text-decoration:underline
					}
				}
			}
			&-group {
				margin-bottom: 40upx;
			}
		}
		&-wrap {
			padding: 10upx 50upx 80upx 50upx;
		}
	}
}

</style>
